
import { useIntersectionObserver } from '@vueuse/core'
export const directivePlugin = {
    install(app){
// focus:指令的名字
            app.directive('imgLazy', {
            mounted(el, binding) {
                // el：指令绑定的那个元素
                // binding.value:绑定的元素的值，等号后边的值

                    const { stop } =  useIntersectionObserver(
                el,//监听谁 el(所要加载的图片是我们想要监听的对象)
                ([{ isIntersecting }]) => {
   
                    // isIntersecting布尔值ture或者false，在视口区域是true，不在视口区域就是false
                    if(isIntersecting){
                        // 如果isIntersecting为true代表进入到了视口区域那么拿到图片给他赋予一个地址(el就是图片，binding.value就是地址)
                        el.src = binding.value
                        stop()
                    }
                 },
                )
                
            },

        })
    }
}